<script setup>
const emits = defineEmits(['deleteItems'])
const props = defineProps({
    tree: { type: Array, default: [] },//树形结构数据
    isOpen: { type: Boolean, default: false },//是否全部展开
    showId: { type: Boolean, default: false },//表格前是否显示id
    loadTip: { type: String, default: '' }//数据提示信息
})
const router = useRouter()
const route = useRoute()

const status = reactive({
    treeExpand: {},//记录树形结构的展开状态
})
const data = reactive({
    routePath: route.path,//以供onBeforeUnmount判断离开页面时使用
    treeIds: []//树形结构的所有id
})
const tableRef = ref()//table row展开用到

onMounted(() => {
    //读取本地数据
    const pageAction = func.jsonStorage(data.routePath)
    status.treeExpand = pageAction.treeExpand || {}
})
onBeforeUnmount(() => {
    //如果进入的不是子级页面则删除当前页面的动作
    if (data.routePath.split('/')[1] != route.path.split('/')[1]) {
        localStorage.removeItem(data.routePath)
    }
})
watch(() => props.tree, (newValue, oldValue) => {//树形结构
    //获取树形菜单所有id
    const list = func.treeToList(props.tree)
    data.treeIds = list.map(item => item.id);
    //默认tree的展开状态(只在页面载入时ajax的变动)
    if (Object.keys(oldValue).length == 0) {
        nextTick(() => { setExpand(props.tree) })
    }
})
watch(() => props.isOpen, () => {//tree全部展开与收起
    if (data.treeIds.length > 0) {//有内容时
        const treeExpand = {}
        if (props.isOpen) {
            for (const i in data.treeIds) {
                const item = data.treeIds[i]
                treeExpand[item] = true
            }
        }
        setExpandAll(props.tree, props.isOpen);
        //保存到localstorage
        func.jsonStorage(data.routePath, { treeExpand: treeExpand })
    }
});

//设置tree全部展开或者收起
const setExpandAll = (tree, toggle) => {
    for (const i in tree) {
        const item = tree[i]
        tableRef.value.toggleRowExpansion(item, toggle);
        if (item.children && item.children.length > 0) {
            setExpandAll(item.children, toggle);
        }
    }
};
//tree的展开状态
const setExpand = (tree) => {
    for (const i in tree) {
        const item = tree[i]
        tableRef.value.toggleRowExpansion(item, status.treeExpand[item.id] || false);
        if (item.children && item.children.length > 0) {
            setExpand(item.children);
        }
    }
};
//table点击列展开与收起
const cellClick = (row, cell) => {
    if (row.children.length > 0 && [0].indexOf(cell.no) != -1) {//table中点击0列如需其他列需加入对应索引
        tableRef.value.toggleRowExpansion(row)
        //保存到localstorage
        const pageAction = func.jsonStorage(data.routePath)
        if (!pageAction.treeExpand) pageAction.treeExpand = {}
        pageAction.treeExpand[row.id] = !pageAction.treeExpand[row.id]
        func.jsonStorage(data.routePath, { treeExpand: pageAction.treeExpand })
    }
}
</script>

<template>
    <div>
        <el-table class="nopage" ref="tableRef" @cell-click="cellClick" :empty-text="props.loadTip" :data="props.tree"
            row-key="id" :default-expand-all="props.isOpen">
            <el-table-column prop="name" label="类型名称" width="580">
                <template #default="scope">
                    <span v-show="props.showId" class="pr10 mr10" style="border-right:var(--el-table-border);">{{
            scope.row.id }}</span>
                    <span>{{ scope.row.name }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="200">
                <template #default="scope">
                    <el-link class="mr10" type="primary"
                        @click="router.push('/articleType/edit?id=' + scope.row.id + '&back=' + encodeURIComponent(route.fullPath))">
                        <span v-if="$power('/articleType/info') && $power('/articleType/edit')">修改</span>
                        <span v-else-if="$power('/articleType/info')">详情</span>
                    </el-link>
                    <el-link class="mr10" type="primary"
                        @click="router.push('/articleType/edit?fid=' + scope.row.id + '&back=' + encodeURIComponent(route.fullPath))"
                        v-if="$power('/articleType/edit')">添加子级</el-link>
                    <el-popconfirm :hide-after="0" width="200" :title="'确定要删除【' + scope.row.name + '】吗?'"
                        @confirm="emits('deleteItems', scope.row.id)" v-if="$power('/articleType/delete')">
                        <template #reference>
                            <el-link type="danger">删除</el-link>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
            <el-table-column prop="" label="" />
        </el-table>
    </div>
</template>

<style scoped lang="scss"></style>
